<template>
  <div class="hello">
    <el-container>
      <el-main>
        <el-header style="text-align: right; font-size: 12px">
          <div class="block" style="float: left; width: 150px">
            <el-cascader
              size="mini"
              placeholder="指数"
              v-model="option_object"
              :options="optionName"
              @change="handleChange_object"></el-cascader>
          </div>
          <div class="block" style="float: left; width: 150px">
            <el-cascader
              size="mini"
              placeholder="合约日期"
              v-model="option_date"
              :options="options_date"
              @change="handleChange_date"></el-cascader>
          </div>
<!--              :props="option_date_cascader_props"-->
<!--          <h1>Messages</h1>-->
        </el-header>
        <el-table :data="tableData" height="800" border style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <option_charts :parentData="props.row.exercise_price"/>
            </template>
          </el-table-column>
          <el-table-column label="认购期权">
            <el-table-column prop="call_option_interest" label="持仓量" width="180"></el-table-column>
            <el-table-column prop="call_option_price" label="最新价" width="180"></el-table-column>
          </el-table-column>
          <el-table-column prop="exercise_price" label="行权价"></el-table-column>
          <el-table-column label="认沽期权">
            <el-table-column prop="put_option_price" label="最新价" width="180"></el-table-column>
            <el-table-column prop="put_option_interest" label="持仓量" width="180"></el-table-column>
          </el-table-column>
          <el-table-column prop="total_price" label="总价"></el-table-column>
          <el-table-column prop="total_interest" label="总持仓"></el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>

import Option_charts from "./option_charts.vue";
import {createSocket} from "../utils/WebSocket";
import {getYearMonthArray} from '../utils/DateUtil';

export default {
  name: 'HelloWorld',
  components: {Option_charts},
  data () {
    return {
      option_date_cascader_props: {
        lazy: true,
        lazyLoad(node, resolve) {
          let nodes = [];
          let dates = getYearMonthArray(4);
          for(let i = 0; i < dates.length; i++) {
            nodes[i] = {value: dates[i], label: dates[i], children: ''};
          }
          resolve(nodes);
        },
      },
      getSocketData: null,
      option_object: 'ih',
      option_date: '2412',
      optionName: [
        {value: 'ih', label: 'ih'},
        {value: 'io', label: 'io'},
        {value: 'im', label: 'im'}
      ],
      options_date: [
        // {value: '2412', label: '2412'},
        // {value: '2501', label: '2501'},
        // {value: '2502', label: '2502'}
      ],
      tableData: [
        {
          call_option_interest: 4000,
          call_option_price: 94.2,
          exercise_price: 3800,
          put_option_interest: 3000,
          put_option_price: 80,
          total_price: 174.2,
        },
        {
          call_option_interest: 3200,
          call_option_price: 94.2,
          exercise_price: 3900,
          put_option_interest: 3000,
          put_option_price: 80,
          total_price: 174.2,
        },
        {
          call_option_interest: 4000,
          call_option_price: 94.2,
          exercise_price: 3200,
          put_option_interest: 3000,
          put_option_price: 80,
          total_price: 174.2,
        },
      ],
    }
  },
  created(options) {
    // this.websocketInit();
  },
  beforeDestroy() {
  },
  mounted() {
    sessionStorage.setItem('option_date', this.option_date);
    sessionStorage.setItem('option_object', this.option_object);
    //设置选择器选项 标的物恒定不用设置
    this.options_date = [];
    let dates = getYearMonthArray(3);
    for( let i = 0; i < dates.length; i++) {
      this.options_date[i] = { value: dates[i], label: dates[i] };
    }
    this.option_date = dates[0];
    this.fetchOptions();
  },
  destroyed() {
    //移除监听器
    window.removeEventListener('onmessageWS', this.getSocketData);
  },
  methods: {
    //获取期权数据
    fetchOptions() {
      let data = { option_date: this.option_date, option_object: this.option_object};
      this.$axios.post("http://127.0.0.1:8080/fetchOptions", data).then(response => (console.log(response.data))).catch(function (error) {
        console.log(error)
      })
    },
    //合约日期选择器
    handleChange_date(value) {
      sessionStorage.setItem('option_date', value);// value 等于 this.option_date
      //发送请求
    },
    //标的物选择器
    handleChange_object(value) {
      console.log(value);
    },
    //初始化websocket
    websocketInit() {
      console.log('websocket init');
      createSocket('ws://localhost:8080/ws');
      this.getSocketData  = e => {
        const data = e&& e.detail.data
        console.log(data);
      }
      window.addEventListener('onmessageWS', this.getSocketData)
    }
  }
}
</script>

<style>
.call_option_background {
  background: red;
}
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  //line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
